<template>
  <div class="flex_cm container" style="height: 100%">
    <search
      :form_data="header_list"
      @changeIsShow="
        (e) => {
          header_list[e].isShow = !header_list[e].isShow;
        }
      "
      @search="search_key"
      @reset="
        header_list.forEach((item) => {
          item.value = item.type == 'input_number' ? ['', ''] : '';
        }),
          search_key()
      "
    ></search>
    <div class="p_0_10 bg_fff flex1">
      <div class="flex_js p_10_0">
        <div class="c_666 fw">充值明细</div>
        <div class="flex">
          <el-button
            type="primary"
            @click="
              router.push({ name: 'recharge' }),
                EventBus.emit('change_default_active', '/recharge')
            "
            v-if="role_list[2].has_role"
            >再充一笔</el-button
          >

          <setTable
            :data="header_list"
            :height_size="height_size"
            @changeShowTable="
              (e) => {
                header_list[e].showTable = !header_list[e].showTable;
              }
            "
            @resetTableSet="
              () => {
                header_list.forEach((item) => {
                  item.showTable = true;
                });
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e;
              }
            "
          ></setTable>
        </div>
      </div>
      <el-table
        style="text-align: center"
        :max-height="max_height"
        :data="list"
        border
        highlight-current-row
        v-loading="loading"
        :default-sort="{ prop: 'name', order: 'descending' }"
        :row-style="{
          height: height_size == 1 ? '58px' : height_size == 2 ? '48px' : '38px',
        }"
      >
        <el-table-column type="index" label="序号" width="80px" fixed></el-table-column>

        <el-table-column
          label="下单日期"
          sortable
          width="170px"
          prop="createTime"
          key="下单日期"
          v-if="header_list[0].showTable"
          ><template #default="scope: any">
            {{ formatDate(parseInt(scope.row.createTime), "yyyy-MM-dd hh:mm:ss") }}
          </template></el-table-column
        >
        <el-table-column
          label="支付状态"
          key="支付状态"
          sortable
          v-if="header_list[1].showTable"
          prop="status"
        >
          <template #default="scope: any">
            <div v-if="scope.row.status == 1">待付款</div>
            <div v-if="scope.row.status == 2">待确认</div>
            <div v-if="scope.row.status == 3">已确认</div>
            <div v-if="scope.row.status == 4">已取消</div>
            <div v-if="scope.row.status == 5">
              <div>已驳回</div>
              <div>剩余处理时间：</div>
              <div class="item_time">
                {{
                  scope.row.surplus_minutes > 9
                    ? scope.row.surplus_minutes
                    : "0" + scope.row.surplus_minutes
                }}
                :
                {{
                  scope.row.surplus_seconds > 9
                    ? scope.row.surplus_seconds
                    : "0" + scope.row.surplus_seconds
                }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="充值金额"
          key="充值金额"
          sortable
          v-if="header_list[2].showTable"
          prop="totalAmount"
        ></el-table-column>
        <el-table-column
          label="付款金额"
          sortable
          key="付款金额"
          v-if="header_list[3].showTable"
          prop="actualAmount"
        ></el-table-column>
        <el-table-column
          label="所得总额"
          sortable
          key="所得总额"
          v-if="header_list[4].showTable"
          prop="totalAmount"
        ></el-table-column>
        <el-table-column
          label="充值套餐"
          sortable
          prop="packageName"
          key="充值套餐"
          v-if="header_list[5].showTable"
        >
        </el-table-column>
        <el-table-column
          label="付款日期"
          key="付款日期"
          width="170px"
          sortable
          prop="paySuccessTime"
          v-if="header_list[6].showTable"
          ><template #default="scope: any">
            <div v-if="scope.row.paySuccessTime != '-1'">
              {{ formatDate(parseInt(scope.row.paySuccessTime), "yyyy-MM-dd hh:mm:ss") }}
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="交易单号"
          key="交易单号"
          width="170px"
          sortable
          prop="outTradeNo"
          v-if="header_list[7].showTable"
        ></el-table-column>
        <el-table-column
          label="支付方式"
          key="支付方式"
          sortable
          prop="payWay"
          v-if="header_list[8].showTable"
          ><template #default="scope: any">
            <div v-if="scope.row.payWay == 1">余额支付</div>
            <div v-if="scope.row.payWay == 2">微信支付</div>
            <div v-if="scope.row.payWay == 3">支付宝支付</div>
            <div v-if="scope.row.payWay == 4">线下支付</div>
          </template></el-table-column
        >
        <el-table-column
          label="付款备注"
          key="付款备注"
          sortable
          prop="remark"
          v-if="header_list[9].showTable"
          ><template #default="scope: any"
            ><div class="text_over">
              <el-tooltip :content="scope.row.remark" placement="bottom">
                {{ scope.row.remark }}
              </el-tooltip>
            </div></template
          ></el-table-column
        >
        <el-table-column label="操作" width="154px" fixed="right">
          <template #default="scope: any">
            <!-- <table_edit
              :status="true"
              :role="[role_sure, role_edit, role_delete]"
              @edit_item_status="
                delete_role({ item: scope.row, type: scope.row.status ? 2 : 1 })
              "
              @edit_item="update_role(scope)"
              @delete_item="delete_role({ item: scope.row, type: 0 })"
            ></table_edit> -->
            <div class="flex_cc">
              <el-button
                v-if="role_list[0].has_role"
                @click="(pass_item = scope.row), (pass_box = true);"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="m_10_0 pagination"
        style="bottom: 177px"
        v-model:currentPage="page_data.current"
        v-model:page-size="page_data.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="list_debounce()"
        @current-change="list_debounce()"
      />
      <div class="bottom_box">
        <div style="background-color: #f0f2f5; height: 10px"></div>
        <p>余额信息</p>
        <div>
          <div
            class="flex"
            :style="{
              backgroundImage: 'url(' + require('@/assets/img/re_detail_1.png') + ')',
            }"
          >
            <div>
              <p>充值余额</p>
              <p>{{ balance_info?.amount }}</p>
            </div>
          </div>
          <div
            class="flex"
            :style="{
              backgroundImage: 'url(' + require('@/assets/img/re_detail_3.png') + ')',
            }"
          >
            <div>
              <p>待付总额</p>
              <p>0</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pass_box" v-if="pass_box">
      <div>
        <div class="flex_js" style="padding: 15px 20px">
          <div class="fs_16 fw">审核进度</div>
          <svgBtn
            icon="guanbi2"
            style="font-size: 12px"
            @click="pass_box = false"
          ></svgBtn>
        </div>
        <div class="passImg_box">
          <div>
            <div class="flex_cc">
              <img
                src="@/assets/img/pass_4.png"
                style="width: 10px; height: 6px"
                alt=""
              />
            </div>
            <div
              class="flex_cc"
              :style="{
                backgroundColor:
                  pass_item?.status == 2
                    ? '#DBDDE0'
                    : pass_item?.status == 5
                    ? '#EF5656'
                    : '#3580eb',
              }"
            >
              <img
                src="@/assets/img/pass_4.png"
                style="width: 10px; height: 6px"
                alt=""
              />
            </div>
          </div>
          <div class="pass_zh fw">
            <div>提交成功</div>
            <div v-if="pass_item?.status == 2">审核中...</div>
            <div v-if="pass_item?.status == 3 || pass_item?.status == 5">已审核</div>
            <div v-if="pass_item?.status == 2" style="color: #bcbcbc">审核成功</div>
            <div v-if="pass_item?.status == 3">审核通过</div>
            <div v-if="pass_item?.status == 5" style="color: #ef5656">审核驳回</div>
          </div>
          <div class="pass_time">
            <div>
              {{ formatDate(parseInt(pass_item.paySuccessTime), "YY-MM-DD:hh:mm:ss") }}
            </div>
            <div>
              <span v-if="pass_item?.status == 5 || pass_item.status == 3">{{
                formatDate(parseInt(pass_item.updateTime), "YY-MM-DD:hh:mm:ss")
              }}</span>
            </div>
          </div>
          <div class="flex_js">
            <img src="@/assets/img/pass_1.png" style="width: 46px" alt="" />
            <img
              src="@/assets/img/pass_1.png"
              v-if="pass_item?.status != '2'"
              style="width: 46px"
              alt=""
            />
            <img src="@/assets/img/pass_2.png" v-else style="width: 46px" alt="" />
            <img
              src="@/assets/img/pass_1.png"
              v-if="pass_item?.status == 3"
              style="width: 46px"
              alt=""
            />
            <img
              src="@/assets/img/pass_3.png"
              v-if="pass_item?.status == 5"
              style="width: 46px"
              alt=""
            />
            <div style="width: 48px; text-align: center" v-if="pass_item?.status == 2">
              <img src="@/assets/img/pass_5.png" style="width: 28px" alt="" />
            </div>
          </div>
        </div>
        <div v-if="pass_item?.status == 3" style="padding: 0" class="passBox_desc"></div>
        <div class="passBox_desc" v-if="pass_item?.status == 2" style="color: #3580eb">
          客服将在工作日的24小时内进行审核
        </div>
        <div
          class="passBox_desc flex_start"
          v-if="pass_item?.status == 5"
          style="color: #ef5656"
        >
          <div style="flex-shrink: 0">驳回原因：</div>
          <div>
            <p v-for="item in pass_item.itemList">
              <span v-if="item.confirmStatus == 1"
                >水单号：{{ item.outTradeNo }} - {{ item.remark }}</span
              >
            </p>
          </div>
        </div>
        <div style="width: 420px; margin: 0 auto 20px auto">
          <h4 class="fw">水单信息</h4>
          <div v-for="item in pass_item.itemList" :key="item.id">
            水单号：{{ item.outTradeNo }} 金额：{{ item.totalFee }}
          </div>
        </div>
        <el-divider style="width: 100%; margin: 0"></el-divider>
        <div style="padding: 15px 20px; text-align: right">
          <el-button
            type="primary"
            @click="pass_box = false"
            v-if="pass_item?.status == 2 || pass_item?.status == 3"
            >确定</el-button
          >
          <el-button type="primary" v-if="pass_item?.status == 5" @click="pay_again"
            >重新提交</el-button
          >
        </div>
      </div>
    </div>
    <pay_box_page
      :pay_box="pay_box"
      :form_data="form_data"
      :again_pay_form_data="again_pay_form_data"
    ></pay_box_page>
  </div>
</template>

<script lang="ts" setup>
import { check_role, formatDate, handle_search_key, debounce } from "@/utils/check_role"; // 权限校验
import search from "@/view/components/search.vue";
import setTable from "@/view/components/setTable.vue";
import pay_box_page from "./pay_box.vue";
import svgBtn from "@/components/svg_button.vue";
import { onMounted, ref, onUnmounted, computed } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import EventBus from "@/utils/EventBus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const role_list = ref([
  { path: "recharge_detail/put", has_role: false },
  { path: "recharge_detail/delete", has_role: false },
  { path: "recharge/post", has_role: false },
]);
const store = useStore();
const list = ref();
const total = ref();
const loading = ref(false);
const router = useRouter();
const height_size = ref(1);
const max_height = ref();
const header_list = ref<any>([
  {
    label: "下单日期",
    value: "",
    showTable: true,
    type: "date",
    isShow: true,
    options: [],
  },
  {
    label: "支付状态",
    value: "",
    showTable: true,
    type: "select",
    isShow: true,
    options: [
      { value: 2, label: "待确认" },
      { value: 3, label: "已确认" },
      //   { value: 4, label: '已取消' },
      { value: 5, label: "已驳回" },
    ],
  },
  {
    label: "充值金额",
    value: ["", ""],
    showTable: true,
    type: "input_number",
    isShow: false,
    options: [],
  },
  {
    label: "付款金额",
    value: ["", ""],
    showTable: true,
    type: "input_number",
    isShow: false,
    options: [],
  },
  {
    label: "所得总额",
    value: ["", ""],
    showTable: true,
    type: "input_number",
    isShow: false,
    options: [],
  },
  {
    label: "充值套餐",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "付款日期",
    value: "",
    showTable: true,
    type: "date",
    isShow: false,
    options: [],
  },
  {
    label: "交易单号",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "支付方式",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: [
      //   {
      //     label: '余额支付',
      //     value: 1,
      //   },
      {
        label: "微信支付",
        value: 2,
      },
      {
        label: "支付宝支付",
        value: 3,
      },
      {
        label: "线下支付",
        value: 4,
      },
    ],
  },
  {
    label: "付款备注",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
]);
EventBus.on("close_pay_box", () => {
  get_list();
  pay_box.value = false;
  pass_box.value = false;
});
const page_data = ref({
  current: 1,
  pageSize: 10,
  status: "",
  accountAmount: "",
  actualAmount: "",
  createTime: "",
  outTradeNo: "",
  packageName: "",
  paySuccessTime: "",
  payWay: "",
  remark: "",
  totalAmount: "",
});
const form_data = ref({
  remark: "",
  rechargePackageId: "",
  payWay: 4, // 1 余额支付 2 微信 3 支付宝  4 银行卡
  rechargeAmount: "",
});
const again_pay_form_data = ref();
const pay_again = () => {
  form_data.value = {
    remark: pass_item.value.remark,
    rechargePackageId: pass_item.value.id,
    payWay: 4, // 1 余额支付 2 微信 3 支付宝  4 银行卡
    rechargeAmount: pass_item.value.totalAmount,
  };
  again_pay_form_data.value = pass_item.value.itemList;
  pay_box.value = true;
};
const pay_box = ref(false);
const pass_box = ref(false);
const pass_item = ref();
onMounted(() => {
  role_list.value.forEach((item) => {
    item.has_role = check_role(item);
  });
  max_height.value = window.innerHeight - 490; // 不带分页的 table 高度
  EventBus.on("refresh", () => {
    get_list();
    ElMessage.success("刷新成功！");
  });
  setInterval(() => {
    get_list();
  }, 600000);
  get_list();
});
const current_enterprise_level = computed(() => {
  // 当前企业登等级  取多产品中最高级
  return Math.max(...store.state.current_enterprise_level.map(({ levelId }) => levelId));
});
onUnmounted(() => {
  EventBus.off("refresh");
});
const balance_info = ref(
  computed(() => {
    return store.state.balance_info;
  })
);

const timer = ref();
const get_list = () => {
  if (loading.value) return;
  loading.value = true;
  clearInterval(timer.value);
  axios
    .request({
      url: serviceApi.rachargeOrder_list,
      method: "post",
      data: handle_search_key(page_data.value),
    })
    .then((res) => {
      console.log(res);
      //   list.value = res.data.content
      let tableData = res.data.content ? res.data.content : [];
      tableData.forEach((item) => {
        if (item.status == 5) {
          // 驳回倒计时处理
          item.surplus_minutes = "0";
          item.surplus_seconds = "0";
          var timestamp = Date.parse(new Date() as any);
          item.surplus_time = Math.floor(
            (parseInt(item.updateTime) + item.minutes * 60 * 1000 - timestamp) / 1000
          );
        }
      });
      list.value = tableData;
      timer.value = setInterval(() => {
        list.value.forEach((item, index) => {
          item.surplus_time -= 1;
          item.surplus_minutes = parseInt((item.surplus_time / 60).toString());
          item.surplus_seconds = parseInt((item.surplus_time % 60).toString());
          if (item.surplus_time < 0) {
            list.value.splice(index, 1);
            item.surplus_minutes = "0";
            item.surplus_seconds = "0";
            total.value -= 1;
          }
          let flag = list.value.every((item) => {
            // 所有剩余时间 < 0  倒计时结束
            return item.surplus_time < 0;
          });
          if (flag) clearInterval(timer.value);
        });
        loading.value = false;
      }, 1000);
      total.value = parseInt(res.data.totalElements);
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};

let list_debounce = debounce(200, get_list);
const search_key = () => {
  page_data.value = {
    current: 1,
    pageSize: 10,
    createTime: header_list.value[0].value,
    status: header_list.value[1].value,
    accountAmount: header_list.value[4].value,
    actualAmount: header_list.value[3].value,
    totalAmount: header_list.value[2].value,
    outTradeNo: header_list.value[7].value,
    packageName: header_list.value[5].value,
    paySuccessTime: header_list.value[6].value,
    payWay: header_list.value[8].value,
    remark: header_list.value[9].value,
  };
  get_list();
};
</script>

<style lang="scss" scoped>
.pass_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  > div {
    background-color: #fff;
    .passImg_box {
      height: 46px;
      width: 420px;
      margin: 50px auto 20px auto;
      position: relative;
      .pass_time {
        display: flex;
        align-items: center;
        font-size: 12px;
        justify-content: space-between;
        color: #666666;
        > div:first-child {
          margin-left: -30px;
        }
        > div:last-child {
          margin-right: -30px;
        }
      }
      .pass_zh {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;
        > div {
          width: 68px;
          text-align: center;
        }
      }
      > div:first-child {
        display: flex;
        align-items: center;
        height: 100%;
        z-index: 20;
        div {
          width: 41%;
          margin: 0 4.5%;
          height: 8px;
          background-color: #3580eb;
        }
      }
      > div:last-child {
        position: absolute;
        top: 0;
        left: 2%;
        width: 96%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 101;
      }
    }
    .passBox_desc {
      background-color: #f5f6f7;
      padding: 15px;
      width: 470px;
      margin: 80px 60px 20px 60px;
      text-align: center;
    }
  }
}
.bottom_box {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  > p {
    font-size: 16px;
    font-weight: bold;
    margin: 15px 20px;
  }
  > div {
    display: flex;
    align-items: center;
    color: #fff;
    > div {
      display: flex;
      align-items: center;
      background-size: 100% 100%;
      width: 190px;
      height: 90px;
      margin: 0 0 0 20px;
      > div {
        margin-left: 16px;
      }
    }
    > div p:first-child {
      font-size: 14px;
    }
    > div p:last-child {
      font-size: 24px;
      font-weight: bold;
    }
  }
}
</style>
